<template>
  <div class="main">
    <!-- 侧边栏菜单 -->
    <header class="header">
      <div class="inner">
        <div class="logo">
          <router-link title="返回首页~" v-bind:to="'/Home/HomeContent'">
            <img src="@/assets/icon/ikaros.svg" alt="ikaros·摄影杂谈" />
          </router-link>
        </div>
        <div class="tagline">
          IKAROS'Photography Miscellany -- ikaros的摄影杂谈，由 ikaros
          本人立项开发，我的目标是让你能更加方便的看到我拍摄的图片。
        </div>
        <div class="nav">
          <ul>
            <li>
              <router-link
                class="mobile-hide nav-home"
                v-bind:to="'/Home/HomeContent'"
              >
                <img class="nav-icon" src="@/assets/icon/ikaros_logo.svg" />
                <span>我的首页 <em class="small-hide">Ikaros.Home</em></span>
              </router-link>
            </li>
            <li>
              <router-link class="nav-about" v-bind:to="'/Home/AboutContent'">
                <img class="nav-icon" src="@/assets/icon/about.svg" />
                <span>关于本台 <em class="small-hide">Ikaros.About</em></span>
              </router-link>
            </li>
            <li>
              <router-link class="nav-archive" v-bind:to="'/Home/HomeContent'">
                <img class="nav-icon" src="@/assets/icon/archive.svg" />
                <span>往期存档 <em class="small-hide">Ikaros.Archive</em></span>
              </router-link>
            </li>
            <li>
              <router-link class="nav-tag" v-bind:to="'/Home/HomeContent'">
                <img class="nav-icon" src="@/assets/icon/tag.svg" />
                <span>来点标签 <em class="small-hide">Ikaros.Tag</em></span>
              </router-link>
            </li>
            <li class="nav-label"><span>Ikaros.Lab</span></li>
            <li>
              <router-link class="nav-search" v-bind:to="'/Home/HomeContent'">
                <img class="nav-icons" src="@/assets/icon/search.svg" />
                <span>搜索本站 <em class="small-hide">Ikaros.Search</em></span>
              </router-link>
            </li>
            <li>
              <a class="nav-blog" @click="toBlog">
                <img class="nav-icon" src="@/assets/icon/blog.svg" />
                <span
                  >伊卡洛斯博客 <em class="small-hide">Ikaros.Blog</em></span
                >
              </a>
            </li>
            <li>
              <a class="nav-blog" @click="toLofter">
                <img class="nav-icon" src="@/assets/icon/lofter.svg" />
                <span
                  >伊卡洛斯乐乎 <em class="small-hide">Ikaros.Lofter</em></span
                >
              </a>
            </li>
            <li>
              <a class="nav-blog" @click="toSakura">
                <img class="nav-icon" src="@/assets/icon/sakura.svg" />
                <span
                  >伊卡洛斯桜花抄
                  <em class="small-hide">Ikaros.Sakura</em></span
                >
              </a>
            </li>
            <li class="nav-label"><span>订阅我台</span></li>
            <li>
              <a class="nav-blog" @click="toMyMusic">
                <img class="nav-icon" src="@/assets/icon/music.svg" />
                <span>网易云音乐 </span>
              </a>
            </li>
            <li class="nav-label"><span>关注 & 联系我</span></li>
            <li class="side-follow">
              <a href="mailto:ikarosyu@163.com" title="给我发邮件">E-mail</a>
              <a href="https://twitter.com/ikarosyu" target="_blank" rel="noopener" title="关注我的 Twitter~">Twitter</a>
              <a href="https://www.xiaohongshu.com/user/profile/5c9587d10000000010025862" target="_blank" rel="noopener" title="关注我的小红书">小红书</a>
              <a href="https://github.com/ikarosyu/" target="_blank" rel="noopener" title="关注我的 GitHub">GitHub</a>
              <a href="https://www.instagram.com/ikarosyu/" target="_blank" rel="noopener" title="关注我的 IG">Instagram</a>
              <a href="https://www.zhihu.com/people/ikaros-48" target="_blank" rel="noopener" title="关注我的知乎">知乎</a>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="section content">
      <router-view></router-view>
    </main>
  </div>
</template>

<script src="./home.js"></script>

<style lang="less" scoped>
@import "./home.less";
</style>
